$brand-color: #657DAD;

$form-group-margin-bottom: 1rem !default;
$input-line-height: 1.5 !default;
$input-padding-x: 0.75rem !default;
$input-padding-y: 0.375rem !default;
$input-bg: transparent !default;
$input-bg-disabled: #ccc !default;
$input-color: $brand-color !default;
$input-border-color: $brand-color !default;

$input-border-focus: darken($input-border-color, 5%) !default;
$input-color-placeholder: #999 !default;

$btn-width: 120px !default;
$btn-height: 46px !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-color !default;
$font-size-small: 14px !default;

@import "form-mixin";
@import "form-components";
@import "button-mixin";
@import "button-components";

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;

  a {
    text-decoration: none;
    transition: color 0.3s ease-in-out;
  }

  svg * {
    fill: none;
    stroke: currentColor;
  }
}

.landing {
  width: 100%;
  height: 100%;
  background-image: url('../images/bg.jpg');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  .navbar {
    display: flex;
    justify-content: space-between;
    width: 980px;
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    .logo {
      margin: 0;
      font-weight: normal;
      color: $brand-color;
      letter-spacing: 2px;
    }
    nav {
      a {
        margin-left: 4em;
        color: $brand-color;
        &:hover {
          color: darken($brand-color, 15%);
        }
      }
    }
  }

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    text-align: center;
    .caption {
      margin: 0 0 1em;
      font-weight: normal;
      color: $brand-color;
    }

    .code {
      color: lighten($brand-color, 15%);
      text-align: center;
      transition: color 0.3s ease-in-out;

      &.active {
        color: lighten($brand-color, 2%);
      }
    }

    .randao-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 640px;
      height: 240px;
      border: 2px dashed $brand-color;
      border-radius: 20px;
      margin: 2em auto;
      .randao-progress-wrapper {
        width: 74px;
        color: $brand-color;
      }
    }

    .send-address {
      display: flex;
      justify-content: space-between;
      transform: translateY(36px);
      opacity: 0;
      transition: all 1.5s ease-in-out;

      .form-control {
        &::-webkit-input-placeholder {
          color: $brand-color;
        }
      }

      &.show {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}

.intro {
  width: 100%;
  height: 100%;
}

.tap {
  border: 2px solid $brand-color;
  border-radius: 50%;
  height: 2em;
  margin: -2.5em 0 0 -2.5em;
  position: absolute;
  width: 2em;
  z-index: 999;
  -webkit-animation: tap 800ms;
  animation: tap 800ms;
  -webkit-transform: scale(.2);
  transform: scale(.2);
}

@keyframes tap {
  100% { transform: scale(1); }
}
